<template>
  <el-row v-loading="loading">
          <h1>健康方案</h1>
        <hr>
    <jkfa-edit ref="jkfaEdit" :parentTypeList="parentTypeList" v-on:save-finished="getJkfaList()"></jkfa-edit>
        <el-col :span="4">
    <el-input placeholder="标题" v-model="search.title"></el-input>
    </el-col>
    <el-col :span="6">
      方案类别:<el-select placeholder="全部" v-model="search.typeId">
      <el-option
          v-for="item in parentTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
            </el-option>
    </el-select>
    </el-col>
    <el-button type="primary" @click="getJkfaList()">查询</el-button>
      <el-col float="rigth">
            <el-button type="primary" icon="el-icon-plus" size="small"
              style="float:left" v-show="add" @click="addJkfa">新增</el-button>
        </el-col>
        <el-col :span="24">
        <el-table :data="thealthplanList.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" :default-sort = "{prop: 'code', order: 'descending'}">
        <el-table-column prop="code" label="编码" sortable width="180"></el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="keywords" label="关键字"></el-table-column>
        <el-table-column prop="tHealthPlanType.name" label="方案类别"></el-table-column>
       <el-table-column prop="content" label="内容"></el-table-column>
       <el-table-column prop="state" label="状态" :formatter="formatterState"></el-table-column>
       <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="edit" type="primary" size="mini" class="el-icon-edit"
                  @click="handleEditjkfa(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini"
                  @click="handleDeletejkfa(scope.row)" class="el-icon-delete">删除</el-button>
              </template>
      </el-table-column>
    </el-table>
     <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="thealthplanList.length">
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

</template>

<script>
import {ThealthplanQueryAll,ThealthplanTypeQueryAll,ThealthplanQueryLike,ThealthplanDel,ThealthplanqueryById} from '@/api/jiankangfangan_tj'
import jkfaEdit from '@/components/jiankangfangan/jkfaEdit'
export default {
  data() {
    return {
      loading:false,
      thealthplanList:[],
      edit:true,
      add:true,
      search:{
        title:"",
        typeId:""
        },
      liketilte :"",
      typeId:"",
      parentTypeList:[],
      pageNum:1,
      pageSize:5
    }
  },
  methods: {
      async pageInit() {
      try {
        let [listThealthPlanResp,listTypeResp] = await Promise.all([
         ThealthplanQueryAll(),
         ThealthplanTypeQueryAll()
        ])
        this.thealthplanList = listThealthPlanResp.data
        this.parentTypeList=listTypeResp.data
      } catch(error) {
        this.outputError(error)
      }
    },
     formatterState:function (row, column, cellValue) {
            if (cellValue===1){
                return '禁用';
            }else if (cellValue===0){
                return '启用';
            }
        },
         getJkfaList() {
          this.loading = true
          console.log(this.search)
          ThealthplanQueryLike(this.search)
          .then(response => {
            this.thealthplanList = response.data
            console.log(this.thealthplanList)
            this.loading = false
          })
          .catch(error => {
            console.log(error)
            this.loading = false
          })
    },
    handleSizeChange(val) {
     this.pageSize = val;
     this.getJkfaList()
    },
    addJkfa(){
      this.$refs.jkfaEdit.$emit('openAddDialog')
      },
      handleDeletejkfa(row){
         this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
          this.loading = true
          ThealthplanDel(row.id).then(response => {
          this.loading = false
          this.getJkfaList();
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(() => {})
        },
        handleEditjkfa(row){
          this.loading = true
          ThealthplanqueryById(row.id)
          .then(response => {
            this.$refs.jkfaEdit.$emit('openEditDialog',response.data)
            this.loading = false
          })
          .catch(error => {
            console.log(error)
          })
          }
  },
    created() {
      this.pageInit();
    },
    components:{
      jkfaEdit
      }


}
</script>

<style>

</style>
